<template>
    <div class="operate">
        <!-- 标题搜索输入框 -->
        <el-input v-model="searchTitle" placeholder="请输入标题" clearable @clear="fetchData" />
        <!-- 状态筛选下拉框 -->
        <el-select v-model="selectedStatus" placeholder="状态" clearable>
            <el-option v-for="item in statusFilters" :key="item.value" :label="item.text" :value="item.value">
            </el-option>
        </el-select>
        <!-- 审核人筛选下拉框 -->
        <el-select v-model="selectedAuditor" placeholder="审核人" clearable>
            <el-option v-for="auditor in uniqueAuditors" :key="auditor" :label="auditor" :value="auditor">
            </el-option>
        </el-select>
        <!-- 重置按钮 -->
        <el-button @click="resetFilters">重置</el-button>
        <!-- 导出按钮 -->
        <el-button @click="educeData">导出</el-button>
    </div>

    <!-- 内容数据表格，双击行可跳转编辑 -->
    <el-table :data="filteredTableData" row-key="id" style="width: 100%; margin-top: 1%;"
        @row-dblclick="handleRowDblClick">
        <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="简介" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip>
            <template #default="scope">
                {{ scope.row.updatedAt || '—' }}
            </template>
        </el-table-column>
        <el-table-column label="审核人" show-overflow-tooltip>
            <template #default="scope">
                <!-- 只有审核通过才显示审核人，否则显示横线 -->
                {{ scope.row.status === '审核通过' ? scope.row.auditor : '—' }}
            </template>
        </el-table-column>
        <template #empty>暂无数据</template>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next"
        @current-change="handlePageChange" />
</template>

<script setup>
// 引入 vue 相关方法
import { ref, computed } from 'vue'
// 引入 element-plus 组件
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElSelect, ElOption } from 'element-plus'
// 引入 vue-router
import { useRouter } from 'vue-router'
// 引入 xlsx 用于导出 Excel
import * as XLSX from 'xlsx' // 导入数据导出库

// 搜索和筛选相关响应式变量
const searchTitle = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const selectedStatus = ref(null)
const selectedAuditor = ref(null)
const router = useRouter()

// 表格数据
const tableData = ref([
    {
        id: 1,
        title: '标题1',
        description: '简介1',
        status: '审核通过',
        createdAt: '2023-01-01',
        updatedAt: '2023-01-02',
        auditor: '张三'
    },
    {
        id: 2,
        title: '标题2',
        description: '简介2',
        status: '审核未通过',
        createdAt: '2023-02-01',
        updatedAt: null,
        auditor: null
    },
    {
        id: 3,
        title: '标题3',
        description: '简介3',
        status: '审核通过',
        createdAt: '2023-01-01',
        updatedAt: '2023-01-02',
        auditor: '张三'
    },
    {
        id: 4,
        title: '标题4',
        description: '简介4',
        status: '审核通过',
        createdAt: '2023-01-01',
        updatedAt: '2023-01-02',
        auditor: '李四'
    },
    {
        id: 5,
        title: '标题5',
        description: '简介5',
        status: '审核通过',
        createdAt: '2023-01-01',
        updatedAt: '2023-01-02',
        auditor: '王五'
    }
])

// 状态筛选项
const statusFilters = [
    { text: '审核通过', value: '审核通过' },
    { text: '审核中', value: '审核中' },
    { text: '审核未通过', value: '审核未通过' },
    { text: '已删除', value: '已删除' },
]

// 审核人去重列表
const uniqueAuditors = ref([])
tableData.value.forEach(item => {
    if (item.auditor && !uniqueAuditors.value.includes(item.auditor)) {
        uniqueAuditors.value.push(item.auditor)
    }
})

// 计算筛选后的表格数据
const filteredTableData = computed(() => {
    let filtered = tableData.value.filter(item => {
        return (
            (!selectedStatus.value || item.status === selectedStatus.value) &&
            (!selectedAuditor.value || item.auditor === selectedAuditor.value) &&
            (!searchTitle.value || item.title.includes(searchTitle.value))
        )
    })
    total.value = filtered.length
    // 分页
    return filtered.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

// 搜索框清空时重置页码
const fetchData = () => {
    currentPage.value = 1
}

// 分页切换
const handlePageChange = newPage => {
    currentPage.value = newPage
}

// 重置筛选条件
const resetFilters = () => {
    searchTitle.value = ''
    selectedStatus.value = null
    selectedAuditor.value = null
    currentPage.value = 1
}

// 双击表格行跳转到内容编辑页
const handleRowDblClick = row => {
    router.push(`/dashboard/content/edit/${row.id}`)
}

// 导出当前筛选后的数据为 Excel
const educeData = () => {
    const worksheet = XLSX.utils.json_to_sheet(filteredTableData.value)
    // 创建一个新的工作簿并添加工作表
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    // 导出工作簿为Excel文件
    XLSX.writeFile(workbook, '内容数据列表.xlsx')
}

// 初始化时重置页码
fetchData()
</script>

<style scoped>
/* 操作栏样式 */
.operate {
    display: flex;
    align-items: center;
}

.operate>div,
.operate>button {
    margin-left: 1%;
}

.operate>.el-input {
    width: 20%;
}

.operate>.el-select {
    width: 15%;
}
</style>